<template>
	<view class="container">
		<!-- 页面标题 -->
		<view class="header">
		
			<view class="title">房源详情</view>
		</view>
		
		<!-- 状态卡片 -->
		<view class="status-card" :class="getStatusClass(housing.status)">
			<text class="status-text">{{ housing.status }}</text>
			<text class="status-desc">{{ getStatusDesc(housing.status) }}</text>
		</view>
		
		<!-- 房源信息 -->
		<view class="info-section">
			<view class="section-title">房源信息</view>
			
			<view class="info-item">
				<text class="label">单元编号</text>
				<text class="value">{{ housing.unit.unit_number }}</text>
			</view>
			
			<view class="info-item">
				<text class="label">所在位置</text>
				<text class="value">{{ housing.unit.building }} {{ housing.unit.floor }}</text>
			</view>
			
			<view class="info-item">
				<text class="label">单元类型</text>
				<text class="value">{{ housing.unit.unit_type }}</text>
			</view>
			
			<view class="info-item">
				<text class="label">实际面积</text>
				<text class="value">{{ housing.unit.actual_area }} ㎡</text>
			</view>
			
			<view class="info-item">
				<text class="label">租金</text>
				<text class="value price">{{ housing.unit.rental_price }} 元/㎡/月</text>
			</view>
			
			<view class="info-item">
				<text class="label">物业费</text>
				<text class="value">{{ housing.unit.property_fee_standard }} 元/㎡/月</text>
			</view>
		</view>
		
		<!-- 申请信息 -->
		<view class="info-section">
			<view class="section-title">申请信息</view>
			
			<view class="info-item">
				<text class="label">申请编号</text>
				<text class="value">{{ housing.application_id }}</text>
			</view>
			
			<view class="info-item">
				<text class="label">申请时间</text>
				<text class="value">{{ housing.application_time }}</text>
			</view>
			
			<view class="info-item">
				<text class="label">期望开始</text>
				<text class="value">{{ housing.expected_start_date }}</text>
			</view>
			
			<view class="info-item">
				<text class="label">期望租期</text>
				<text class="value">{{ housing.expected_duration }} 个月</text>
			</view>
			
			<view class="info-item" v-if="housing.approval_opinion">
				<text class="label">审批意见</text>
				<text class="value">{{ housing.approval_opinion }}</text>
			</view>
		</view>
		
		<!-- 合同信息 -->
		<view class="info-section" v-if="housing.contract">
			<view class="section-title">合同信息</view>
			
			<view class="info-item">
				<text class="label">合同编号</text>
				<text class="value">{{ housing.contract.contract_number }}</text>
			</view>
			
			<view class="info-item">
				<text class="label">合同名称</text>
				<text class="value">{{ housing.contract.contract_name }}</text>
			</view>
			
			<view class="info-item">
				<text class="label">租期</text>
				<text class="value">{{ housing.contract.start_date }} 至 {{ housing.contract.end_date }}</text>
			</view>
			
			<view class="info-item">
				<text class="label">合同金额</text>
				<text class="value price">{{ housing.contract.contract_amount }} 元</text>
			</view>
			
			<view class="info-item">
				<text class="label">支付周期</text>
				<text class="value">{{ housing.contract.payment_cycle }}</text>
			</view>
			
			<view class="info-item">
				<text class="label">签约日期</text>
				<text class="value">{{ housing.contract.sign_date }}</text>
			</view>
			
			<view class="info-item">
				<text class="label">合同状态</text>
				<text class="value">{{ housing.contract.status }}</text>
			</view>
		</view>
		
		<!-- 操作按钮 -->
		<view class="action-section">
			<button 
				class="contract-btn" 
				v-if="housing.status === '初审通过' && !housing.contract"
				@click="fillContract"
			>填写合同</button>
			
			<button 
				class="cancel-btn" 
				v-if="housing.status === '待初审' || housing.status === '待复审'"
				@click="cancelApplication"
			>取消申请</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: null,
				housing: {
					unit: {}
				}
			}
		},
		onLoad(options) {
			this.id = options.id
			
			// 从缓存获取房源详情
			const housingDetail = uni.getStorageSync('currentMyHousingDetail')
			if (housingDetail && housingDetail.application_id == this.id) {
				this.housing = housingDetail
			} else {
				// 如果缓存中没有，则从服务器获取
				this.fetchHousingDetail()
			}
		},
		methods: {
			// 从服务器获取房源详情
			fetchHousingDetail() {
				uni.showLoading({
					title: '加载中'
				})
				
				uni.request({
					url: `http://localhost:8000/api/services/my-housing/${this.id}/`,
					method: 'GET',
					header: {
						'Authorization': 'Bearer ' + uni.getStorageSync('token')
					},
					success: (res) => {
						uni.hideLoading()
						
						if (res.data.code === 200) {
							this.housing = res.data.data
						} else {
							uni.showToast({
								title: res.data.message || '获取房源详情失败',
								icon: 'none'
							})
						}
					},
					fail: (err) => {
						uni.hideLoading()
						console.error('获取房源详情失败', err)
						uni.showToast({
							title: '获取房源详情失败',
							icon: 'none'
						})
					}
				})
			},
			
			// 获取状态对应的样式类
			getStatusClass(status) {
				switch (status) {
					case '待初审':
						return 'status-pending'
					case '初审通过':
						return 'status-approved'
					case '待复审':
						return 'status-review'
					case '审核通过':
						return 'status-rented'
					case '审核驳回':
						return 'status-rejected'
					case '已取消':
						return 'status-cancelled'
					default:
						return ''
				}
			},
			
			// 获取状态描述
			getStatusDesc(status) {
				switch (status) {
					case '待初审':
						return '您的租赁申请已提交，正在等待管理员初审'
					case '初审通过':
						return '您的租赁申请已通过初审，请填写合同'
					case '待复审':
						return '您的合同已提交，正在等待管理员复审'
					case '审核通过':
						return '您的租赁申请已通过，合同已生效'
					case '审核驳回':
						return '您的租赁申请未通过审核，请查看审批意见'
					case '已取消':
						return '您已取消此租赁申请'
					default:
						return ''
				}
			},
			
			// 填写合同
			fillContract() {
				// 跳转到合同填写页面
				uni.navigateTo({
					url: '/pages/services/housing/contract?id=' + this.id
				})
			},
			
			// 取消申请
			cancelApplication() {
				uni.showModal({
					title: '取消确认',
					content: '确定要取消此租赁申请吗？',
					success: (res) => {
						if (res.confirm) {
							this.doCancelApplication()
						}
					}
				})
			},
			
			// 执行取消申请
			doCancelApplication() {
				uni.showLoading({
					title: '取消中'
				})
				
				uni.request({
					url: `http://localhost:8000/api/services/leasing-applications/${this.id}/cancel/`,
					method: 'POST',
					header: {
						'Authorization': 'Bearer ' + uni.getStorageSync('token')
					},
					success: (res) => {
						uni.hideLoading()
						
						if (res.data.code === 200) {
							uni.showToast({
								title: '取消申请成功',
								icon: 'success'
							})
							
							// 延迟返回
							setTimeout(() => {
								uni.navigateBack()
							}, 1500)
						} else {
							uni.showToast({
								title: res.data.message || '取消申请失败',
								icon: 'none'
							})
						}
					},
					fail: (err) => {
						uni.hideLoading()
						console.error('取消申请失败', err)
						uni.showToast({
							title: '取消申请失败',
							icon: 'none'
						})
					}
				})
			},
			
			// 返回上一页
			goBack() {
				uni.navigateBack()
			}
		}
	}
</script>

<style>
	.container {
		padding-bottom: 100rpx;
	}
	
	.header {
		display: flex;
		align-items: center;
		padding: 20rpx 30rpx;
		background-color: #FFFFFF;
		position: sticky;
		top: 0;
		z-index: 100;
	}
	
	.back-icon {
		font-size: 40rpx;
		margin-right: 20rpx;
	}
	
	.title {
		font-size: 36rpx;
		font-weight: bold;
	}
	
	.status-card {
		margin: 20rpx;
		padding: 30rpx;
		border-radius: 16rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	
	.status-pending {
		background-color: #FFF3E0;
	}
	
	.status-approved {
		background-color: #E8F5E9;
	}
	
	.status-review {
		background-color: #E3F2FD;
	}
	
	.status-rented {
		background-color: #E8EAF6;
	}
	
	.status-rejected {
		background-color: #FFEBEE;
	}
	
	.status-cancelled {
		background-color: #F5F5F5;
	}
	
	.status-text {
		font-size: 36rpx;
		font-weight: bold;
		margin-bottom: 10rpx;
	}
	
	.status-pending .status-text {
		color: #FF9800;
	}
	
	.status-approved .status-text {
		color: #4CAF50;
	}
	
	.status-review .status-text {
		color: #2196F3;
	}
	
	.status-rented .status-text {
		color: #3F51B5;
	}
	
	.status-rejected .status-text {
		color: #F44336;
	}
	
	.status-cancelled .status-text {
		color: #9E9E9E;
	}
	
	.status-desc {
		font-size: 28rpx;
		color: #666666;
		text-align: center;
	}
	
	.info-section {
		background-color: #FFFFFF;
		margin: 20rpx;
		padding: 20rpx;
		border-radius: 16rpx;
	}
	
	.section-title {
		font-size: 32rpx;
		font-weight: bold;
		margin-bottom: 20rpx;
		padding-left: 20rpx;
		border-left: 8rpx solid #007AFF;
	}
	
	.info-item {
		display: flex;
		margin-bottom: 20rpx;
	}
	
	.label {
		width: 160rpx;
		color: #666666;
	}
	
	.value {
		flex: 1;
		color: #333333;
	}
	
	.price {
		color: #FF5722;
		font-weight: bold;
	}
	
	.action-section {
		padding: 30rpx;
		display: flex;
		justify-content: center;
	}
	
	.contract-btn {
		background-color: #007AFF;
		color: white;
		font-size: 32rpx;
		padding: 0 60rpx;
		height: 90rpx;
		line-height: 90rpx;
		border-radius: 45rpx;
		margin: 0 20rpx;
	}
	
	.cancel-btn {
		background-color: #FF5722;
		color: white;
		font-size: 32rpx;
		padding: 0 60rpx;
		height: 90rpx;
		line-height: 90rpx;
		border-radius: 45rpx;
		margin: 0 20rpx;
	}
</style> 